<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },
    chartData: {
        type: Array<any>,
        default: false
    }
});

const data = reactive(props.chartData)


let myChart: any = null


const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let angle = 0; //角度，用来做简单的动画效果的
    function getCirlPoint(x0: number, y0: number, r: number, angle: number) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
            x: x1,
            y: y1
        };
    }

    function draw() {
        angle = angle + 9;
        myChart.setOption(option);
    }
    setInterval(function () {
        draw();
    }, 100);

    var option = {
        // backgroundColor: '#020f18',
        graphic: [{
            type: 'group',
            left: 'center',
            top: '40%',
            children: [{
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                    fill: '#fff',
                    text: '目标完成',
                    font: '16px Microsoft YaHei'
                }
            }]
        }],

        series: [{
            name: "内线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                // console.log(Math.min(
                //     api.getWidth(),
                //     api.getHeight()
                // ) / 2.3)
                return {
                    type: "arc",
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(
                            api.getWidth(),
                            api.getHeight()
                        ) / 2.3,
                        startAngle: ((0 + angle) * Math.PI) / 180,
                        endAngle: ((90 + angle) * Math.PI) / 180
                    },
                    style: {
                        stroke: '#88DB52',
                        fill: "transparent",
                        lineWidth: 3.5
                    },
                    silent: true
                };
            },
            data: [0]
        },

        {
            name: "内线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                return {
                    type: "arc",
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(
                            api.getWidth(),
                            api.getHeight()
                        ) / 2.3,
                        startAngle: ((180 + angle) * Math.PI) / 180,
                        endAngle: ((270 + angle) * Math.PI) / 180
                    },
                    style: {
                        stroke: '#88DB52',
                        fill: "transparent",
                        lineWidth: 3.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "外线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                return {
                    type: "arc",
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(
                            api.getWidth(),
                            api.getHeight()
                        ) / 2.1,
                        startAngle: ((270 + -angle) * Math.PI) / 180,
                        endAngle: ((40 + -angle) * Math.PI) / 180
                    },
                    style: {
                        stroke: '#88DB52',
                        fill: "transparent",
                        lineWidth: 3.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "外线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                return {
                    type: "arc",
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(
                            api.getWidth(),
                            api.getHeight()
                        ) / 2.1,
                        startAngle: ((90 + -angle) * Math.PI) / 180,
                        endAngle: ((220 + -angle) * Math.PI) / 180
                    },
                    style: {
                        stroke: '#88DB52',
                        fill: "transparent",
                        lineWidth: 3.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "线头点",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r =
                    Math.min(api.getWidth(), api.getHeight()) / 2.1;
                let point = getCirlPoint(x0, y0, r, 90 + -angle);
                return {
                    type: "circle",
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 5
                    },
                    style: {
                        stroke: '#88DB52', //绿
                        fill: '#88DB52'
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "线头点",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params: any, api: any) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r =
                    Math.min(api.getWidth(), api.getHeight()) / 2.1;
                let point = getCirlPoint(x0, y0, r, 270 + -angle);
                return {
                    type: "circle",
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 5
                    },
                    style: {
                        stroke: '#88DB52', //绿
                        fill: '#88DB52'
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            type: 'liquidFill',
            data: [0.9, 0.5, 0.4, 0.3],
            color: ['#88DB52', '#88DB52', '#88DB52', '#88DB52'],
            center: ['50%', '50%'],
            radius: '78%',
            amplitude: '8%',
            waveLength: '80%',
            phase: 'auto',
            period: 'auto',
            direction: 'right',
            shape: 'circle',

            waveAnimation: true,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear',
            animationDuration: 2000,
            animationDurationUpdate: 1000,

            outline: {
                show: true,
                borderDistance: 8,
                itemStyle: {
                    color: 'none',
                    borderColor: '#88DB52',
                    borderWidth: 8,
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.25)'
                }
            },

            backgroundStyle: {
                color: '#FFF'
            },

            itemStyle: {
                // opacity: 0.95,
                shadowBlur: 50,
                shadowColor: 'rgba(0, 0, 0, 0.4)'
            },

            label: {
                show: true,
                color: '#88DB52',
                insideColor: '#FFDF72',
                fontSize: 20,
                fontWeight: 'bold',
                align: 'center',
                baseline: 'middle',
                position:  ['50%', '70%']
            },

            emphasis: {
                itemStyle: {
                    opacity: 0.8
                }
            }
        },


        ]
    }
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>